<template>
	<view class="tarbar-view">
		<view class="tarbar-list" :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '0rpx solid ' + tabBar.borderStyle : 0
            }">
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index"
					@click.top="setSelected(item,index)" :style="{'background-color':selected==index?'':''}">
					<!-- <view class="lineto" v-if="index!==0"></view> -->
					<view class="new-bar-message">
						<view class="tarbar-list-li-icon">
							<view class="badge" v-if="item.text === '消息中心' && unReadNum > 0">
								{{unReadNum}}
							</view>
							<image :src="selected === index ? item.selectedIconPath : item.iconPath" mode="heightFix" />
						</view>
						<view class="tarbar-list-li-name"
							:style="{color:selected ===  index ? tabBar.selectedColor: '#272727'}">
							{{ item.text }}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/index-message/index.js'
	export default {
		data() {
			return {
				unReadNum: '',
				selected: '',
				tabBar: {
					color: '#ffffff',
					selectedColor: '#0480FB',
					borderStyle: '#ccc',
					backgroundColor: 'transparent',
					position: 'top',
					list: [
						{
							pagePath: '/pages/socialized-service/order-center/order-center',
							iconPath: '/static/bottom-tabar/home.svg',
							selectedIconPath: '/static/bottom-tabar/home-blue.svg',
							text: '订单中心'
						},
						{
							pagePath: '/pages/socialized-service/index-message/index-message',
							iconPath: '/static/socialized-service/socialized-bottomtabar/chanpin-2.svg',
							selectedIconPath: '/static/socialized-service/socialized-bottomtabar/chanpin-1.svg',
							text: '消息中心'
						},
						{
							pagePath: '/pages/socialized-service/person-message/person-message',
							iconPath: '/static/bottom-tabar/mine.svg',
							selectedIconPath: '/static/bottom-tabar/mine-blue.svg',
							text: '账号管理'
						}
					]
				},
			}
		},
		mounted() {
			this.setselectindex()
			this.getUnreadNum()
		},
		methods: {
			// 查询未读消息数量
			async getUnreadNum(e) {
				const readFlagList = e ? [0] : [0, 1]
				let params = {
					readFlagList: readFlagList,
					receiveUserNo: uni.getStorageSync('userNo') || '211111',
					partyType: uni.getStorageSync('partyType') || '3',
					partyNo: uni.getStorageSync('partyNo') || '1'
				}
				let res = await API.getWaitPostList(params)
				let newList = res.data || []
				let postListLength = 0
				newList.forEach(item => {
					item.receiveInfo && !item.receiveInfo.readFlag && postListLength++
				})
				this.unReadNum = postListLength
				let PartyParams = {
					// receiveUserNo:  uni.getStorageSync('userNo') || '211111',
					// partyType: uni.getStorageSync('partyType') || '3',
					// partyNo: uni.getStorageSync('partyNo') || '1',
					// messageTypeList: [7, 15]
					receivePartyType: '3',
					receivePartyNo: uni.getStorageSync('partyNo') || uni.getStorageSync('organizationNo') || '',
					// messageTypeList: [23, 4]
					messageTypeList: [7, 15],
				}
				let resParty = await API.listByPartyTypeAndPartyNo(PartyParams)
				let PartyMewList = resParty.data || []
				this.unReadNum = postListLength + (PartyMewList&&PartyMewList.length)

			},
			// 获取获取当前处于那个页面，判断index
			setselectindex() {
				let routes = getCurrentPages()
				let curRoute = routes[routes.length - 1].route
				// console.log(curRoute)
				if (curRoute === 'pages/socialized-service/order-center/order-center') {
					this.selected = 0
				} else if (curRoute === 'pages/socialized-service/index-message/index-message') {
					this.selected = 1
				} else if (curRoute === 'pages/socialized-service/person-message/person-message') {
					this.selected = 2
				}
			},
			// 点击底部导航栏触发方法
			setSelected(e, i) {
				if (uni.getStorageSync('partyNo')) {
					if (this.selected !== i) {
						this.$store.commit({
							type: 'setTabbarIndex',
							tabindex: i,
						})
						let routes = getCurrentPages()
						// uni.redirectTo({ url: e.pagePath })
				
						uni.reLaunch({
							// animationType:'fade-in',
							url: e.pagePath,
						});
					}
				
				} else {
					this.$store.commit({
						type: 'setTabbarIndex',
						tabindex: i,
					})
					let routes = getCurrentPages()
					// uni.redirectTo({ url: e.pagePath })
				
					uni.showToast({
						title: '请先入驻或绑定主体',
						icon: 'none'
					});
					setTimeout(() => {
						uni.reLaunch({
							// animationType:'fade-in',
							url: '/pages/socialized-service/person-message/person-message',
						});
					}, 500)
				}
				// 强制刷新组件状态
				// this.$forceUpdate();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.tarbar-view {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 98;

		// padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
		// padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
		.tarbar-list {
			width: 100%;
			max-height: 355rpx;
			min-height: 100rpx;
			color: #4f5153;
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);

			.tarbar-list-ul {
				height: 136rpx;
				box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1, 32, 45, 0.08);
				width: 100%;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				justify-content: space-around;
				// border-top:  1px solid #ebedf0;
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);

				.tarbar-list-li {
					width: 25%;
					height: 136rpx;
					text-align: center;
					display: flex;
					// flex-direction: column;
					// justify-content: center;
					align-items: center;
					justify-content: center;

					// .lineto{
					// 		float: left;
					// 		height: 100rpx;
					// 		width: 3rpx;
					// 		background-image: linear-gradient(to top,#4d586f,#ffffff,#4d586f);
					// 	}
					.new-bar-message {
						width: calc(100% - 2px);
						height: 136rpx;
						// background-color: #4CD964;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.tarbar-list-li-icon {
							position: relative;
							width: 50rpx;
							// height: 60rpx;
							margin: 0 0 6rpx;

							// background-color: #00FFEE;
							image {
								height: 50rpx;
							}

							.badge {

								position: absolute;
								background-color: red;
								min-width: 30rpx;
								border-radius: 50%;
								padding: 2rpx 8rpx;
								top: -18rpx;
								left: 100%;
								z-index: 999;
								text-align: center;
							}
						}

						.tarbar-list-li-name {
							// background-color: #00363D;
							width: 180rpx;
							text-align: center;
							line-height: 30rpx;
							font-size: 28rpx;
							font-weight: 500;
							height: 30rpx;
							letter-spacing: 1rpx;
						}
					}
				}
			}
		}
	}
</style>